<template>
  <div class="no-close flex" id="app-nav-bottom-template">
    <div class="auto" style="background:#108ADD;text-align:center; padding:10px 0px;color:#FFF;font-size: 18px;">
      博能燃气手机抄表
    </div>
    <div class="span">
      <tabset v-ref:tabs :close="false">
        <tab header="<button type='button' name='button' class='nav-img-btn img-chaobiao'>抄表任务</button>">
          <meter-missionsearch></meter-missionsearch>
        </tab>
        <!-- <tab header="<button type='button' name='button' class='nav-img-btn img-yonghu'>用户查询</button>">
          <user-page></user-page>
        </tab> -->
        <tab header="<button type='button' name='button' class='nav-img-btn img-lishi'>历史查询</button>">
          <hand-plan></hand-plan>
        </tab>
        <tab header="<button type='button' name='button' class='nav-img-btn img-shezhi'>设置</button>">
          <tools-page></tools-page>
        </tab>
      </tabset>
    </div>
  </div>
</template>

<script>
export default {
  title: '底部导航'
}
</script>
<style>
/* 底部按钮样式，重复四次 */
  .nav-img-btn {
    background: #FFF;
    border: none;
    width: 100%;
    height: 100%;
    outline: none;
    padding-bottom: 10px;
  }
  li.active .nav-img-btn{
    color: #00B9F1;
  }
  /*抄表*/
  .img-chaobiao::before {
    content: '';
    display: block;
    background-image: url('../../assets/抄表任务.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 25%;
    height: 40px;
  }
  li.active .img-chaobiao::before {
    background-size: 30%;
    background-image: url('../../assets/抄表任务-hover.png');
  }
  /*用户查询*/
  .img-yonghu::before {
    content: '';
    display: block;
    background-image: url('../../assets/用户查询.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 25%;
    height: 40px;
  }
  li.active .img-yonghu::before {
    background-size: 30%;
    background-image: url('../../assets/用户查询-hover.png');
  }
  /*历史查询*/
  .img-lishi::before {
    content: '';
    display: block;
    background-image: url('../../assets/历史查询.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 25%;
    height: 40px;
  }
  li.active .img-lishi::before {
    background-size: 30%;
    background-image: url('../../assets/历史查询-hover.png');
  }
  /*设置*/
  .img-shezhi::before {
    content: '';
    display: block;
    background-image: url('../../assets/设置.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 25%;
    height: 40px;
  }
  li.active .img-shezhi::before {
    background-size: 30%;
    background-image: url('../../assets/设置-hover.png');
  }
  /********************底部样式************************/

  #app-nav-bottom-template .nav-tabs a {
    padding: 0px;
  }
  #app-nav-bottom-template h1 {
    color: #FFF;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    margin: 0;
  }
  #app-nav-bottom-template .flex {
    flex-direction: column-reverse;
  }
  #app-nav-bottom-template ul[role=tablist] {
    display: flex;
    background-color: #E6EBF5;
  }
  #app-nav-bottom-template ul[role=tablist] > li {
    flex: 1;
    margin-bottom: 0px;
    overflow: hidden;
  }
  #app-nav-bottom-template ul[role=tablist] > li > a {
    border-bottom: none;
    margin: 0px;
  }
  #app-nav-bottom-template .tab-content > .tab-pane {
    padding-top: 0px;
  }
</style>
